<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE连接诊断工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
        }
        
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }
        
        h1, h2, h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background-color: #f0f0f0;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #e74c3c;
        }
        
        .status-dot.connected {
            background-color: #2ecc71;
            box-shadow: 0 0 8px #2ecc71;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.2s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .results {
            margin-top: 25px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
            display: none;
        }
        
        .event-log {
            max-height: 300px;
            overflow-y: auto;
            padding: 15px;
            background-color: #2c3e50;
            color: white;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        
        .error {
            color: #e74c3c;
            background-color: #ffebee;
            padding: 10px;
            border-radius: 5px;
            margin-top: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SSE连接诊断工具</h1>
        <p>本工具帮助诊断SSE连接问题，测试与后端的连接状态</p>
        
        <div class="status-indicator">
            <div class="status-dot" id="status-dot"></div>
            <span id="status-text">准备测试</span>
        </div>
        
        <div class="form-group">
            <label for="sse-url">SSE端点URL:</label>
            <input type="text" id="sse-url" value="http://localhost:8000/api/chat_stream?user_input=你好">
        </div>
        
        <button id="test-button">测试SSE连接</button>
        
        <div class="results" id="results">
            <h2>测试结果</h2>
            <div class="event-log" id="event-log"></div>
            <div class="error" id="error-message"></div>
        </div>
    </div>

    <script>
        // DOM元素引用
        const sseUrlInput = document.getElementById('sse-url');
        const testButton = document.getElementById('test-button');
        const statusDot = document.getElementById('status-dot');
        const statusText = document.getElementById('status-text');
        const eventLog = document.getElementById('event-log');
        const errorMessage = document.getElementById('error-message');
        const results = document.getElementById('results');
        
        let eventSource = null;
        
        // 更新状态指示器
        function updateStatus(text, color) {
            statusText.textContent = text;
            statusDot.style.backgroundColor = color;
            statusDot.classList.toggle('connected', color === '#2ecc71');
        }
        
        // 添加日志
        function addLog(message) {
            eventLog.textContent += message + '\n';
            eventLog.scrollTop = eventLog.scrollHeight;
        }
        
        // 显示错误
        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
        }
        
        // 隐藏错误
        function hideError() {
            errorMessage.style.display = 'none';
        }
        
        // 测试SSE连接
        function testSSEConnection() {
            // 重置状态
            eventLog.textContent = '';
            hideError();
            updateStatus('正在连接...', '#f39c12');
            results.style.display = 'block';
            
            // 关闭现有连接
            if (eventSource) {
                eventSource.close();
                eventSource = null;
            }
            
            // 获取URL
            const url = sseUrlInput.value;
            addLog(`开始测试SSE连接: ${url}`);
            
            try {
                // 创建新的SSE连接
                eventSource = new EventSource(url);
                
                eventSource.onopen = () => {
                    addLog('连接已建立');
                    updateStatus('已连接', '#2ecc71');
                };
                
                eventSource.onmessage = (event) => {
                    addLog(`收到消息事件: ${event.data}`);
                };
                
                eventSource.addEventListener('status', (event) => {
                    addLog(`收到状态事件: ${event.data}`);
                });
                
                eventSource.addEventListener('message', (event) => {
                    addLog(`收到消息事件: ${event.data}`);
                });
                
                eventSource.addEventListener('complete', (event) => {
                    addLog(`收到完成事件: ${event.data}`);
                    updateStatus('测试完成', '#2ecc71');
                });
                
                eventSource.addEventListener('error', (event) => {
                    addLog(`收到错误事件: ${event.data}`);
                    showError(`错误事件: ${event.data}`);
                    updateStatus('连接错误', '#e74c3c');
                });
                
                eventSource.onerror = (error) => {
                    addLog(`连接错误: ${error.type}`);
                    showError(`连接错误: ${error.type}`);
                    updateStatus('连接中断', '#e74c3c');
                };
            } catch (error) {
                addLog(`创建EventSource失败: ${error.message}`);
                showError(`创建EventSource失败: ${error.message}`);
                updateStatus('连接失败', '#e74c3c');
            }
        }
        
        // 事件监听器
        testButton.addEventListener('click', testSSEConnection);
    </script>
</body>
</html>